<template>
<div class="container">
    <div class="header">
        <NavBar title="快速寄件" left-arrow color="#333333" @click-left="back" @click-right="backHome">
            <template #right>
                <Icon name="wap-home-o" size="20" />
            </template>
        </NavBar>
    </div>
    <div class="main">
        <Address @addressChange='addressChange'></Address>
        <div class="baoguo" v-for='(item,idx) in list' :key='idx'>
            <div class="title flex align-items space-between">
                <div class="left flex align-items flex-start">
                    <div class="cirle"></div>
                    <span>包裹{{ idx + 1}}</span>
                </div>
                <i class="iconfont iconguanbi" @click='reduceListItem(idx)'></i>
            </div>
            <div class="info-list flex align-items space-between" @click='openLayers("show",idx)'>
                <div class="left">选择包裹</div>
                <div class="right flex1 flex align-items flex-end">
                    <span>{{userBaoguoList[idx]}}</span>
                    <i class="iconfont iconarrow-right"></i>
                </div>
            </div>
            <div class="info-list flex align-items space-between" @click='openLayers("infoShow",idx)'>
                <div class="left">包裹备注</div>
                <div class="right flex1 flex align-items flex-end">
                    <span>{{ list[idx].remark || "请输入包裹备注" }}</span>
                    <i class="iconfont iconarrow-right"></i>
                </div>
            </div>
            <div class="info-list flex align-items space-between" @click='openLayers("valueShow",idx)'>
                <div class="left">增值服务</div>
                <div class="right flex1 flex align-items flex-end">
                    <span>价值{{ increList[idx].baofei }}元，保费{{ increList[idx].value }}元</span>
                    <i class="iconfont iconarrow-right"></i>
                </div>
            </div>
        </div>
        <div class="add-btn flex align-items flex-start" @click='addListItem'>
            <img :src="addBtn" alt="">
            <span>添加新物品</span>
        </div>
        <div class="agree flex align-items flex-start">
            <img :src="[argee ? checkYes : checkNo ]" alt="" @click='argee = !argee'>
            <div class="tips" @click='argee = !argee'>我已认真阅读、同意 <span @click.stop='toAtricle'>《电子运单条款》</span></div>
        </div>
    </div>
    <div class="footer flex align-items space-between">
        <div class="left flex1">
            <div class="top flex align-items flex-start">
                <span class="sp-a">预估费用:</span>
                <span class="sp-b">¥{{ allTotalPrice.totalPrice }}</span>
                <!-- <i class="iconfont icondown"></i> -->
            </div>
            <div class="bt">点击完成信息后可预估费用</div>
        </div>
        <div class="right">
            <Button type="info" block @click='submit'>下单</Button>
        </div>
    </div>
    <!-- 包裹选择弹窗 -->
    <ActionSheet v-model="show" title="运费时效">
        <div class="layer-kuadi">
            <div class="e-list">
                <div class="e-item flex align-items-start space-between" v-for='(item,idx) in useBaoguoList' :key='idx' @click='choseBaoguo(item.id,idx)'>
                    <div class="left flex1">
                        <div class="e-name flex align-items flex-start">
                            <span class="sp-a">{{ item.express_name }}</span>
                            <span class="sp-b">订单号:{{ item.express_sn }}</span>
                        </div>
                        <div class="e-types flex align-items flex-start flex1 flex-wrap ">
                            <div class="e-tem">
                                <div class="txt">快递价格(¥)</div>
                                <div class="result price">{{ item.price }}</div>
                            </div>
                            <div class="e-tem">
                                <div class="txt">物品类型</div>
                                <div class="result">{{ item.name }}</div>
                            </div>
                            <div class="e-tem">
                                <div class="txt">提交时间</div>
                                <div class="result time">{{ item.add_time_content }}</div>
                            </div>
                             <div class="e-tem">
                                <div class="txt">重量</div>
                                <div class="result">{{ item.weight }}Kg</div>
                            </div>
                            <div class="e-tem" >
                                <div class="txt">体积重</div>
                                <div class="result">{{ item.volume_weight }}</div>
                            </div>
                            <div class="e-tem">
                                <div class="txt">体积</div>
                                <div class="result">{{ item.volume }}</div>
                            </div>
                            <div class="e-tem" v-if='item.is_see == 1'>
                                <div class="txt">开箱费用</div>
                                <div class="result">{{ item.see }}</div>
                            </div>
                            <div class="e-tem" v-if='item.is_wood == 1'>
                                <div class="txt">木架</div>
                                <div class="result">{{ item.wood }}</div>
                            </div>
                           
                        </div>
                    </div>
                    <div class="right">
                        <img :src="[item.check == 1 ? checkNo : checkYes]" alt="">
                    </div>
                </div>
                <Empty v-show='useBaoguoList.length == 0' description="暂无可用，点击下方新增包裹" />
            </div>
            <div class="bottom">
                <Button v-if='useBaoguoList.length > 0' type="info" block @click='submitBaoguo'>确认选择</Button>
                <Button v-if='useBaoguoList.length == 0' type="info" block @click='addBaoguo'>新增包裹</Button>
            </div>
        </div>
    </ActionSheet>
    <!-- 包裹信息弹窗 -->
    <ActionSheet v-model="infoShow" title="包裹信息">
        <div class="layer-kuadi">
            <!--<div class="i-item">
                <Boxtype v-model='list[current].id'></Boxtype>
            </div>
            <div class="i-item">
                <div class="box-weight">
                    <div class="title">预估重量 <span>(Kg)</span> </div>
                    <input class="ipt" type="number" placeholder="请输入预估重量" v-model='list[current].weight'>
                </div>
            </div>-->
            <div class="i-item">
                <div class="beizhu-title">备注</div>
                <div class="beizhu">
                    <textarea name="" id="" placeholder="请输入备注信息" v-model='list[current].remark'></textarea>
                </div>
            </div>
            <div class="bottom">
                <Button type="info" block @click='closeLayers("infoShow")'>保存</Button>
            </div>
        </div>
    </ActionSheet>
    <!-- 增值服务弹窗 -->
    <ActionSheet v-model="valueShow" title="增值服务">
        <div class="layer-kuadi">
            <div class="i-item">
                <div class="value-title">物品价值(￥)</div>
                <div class="ipt-value">
                    <Field v-model="list[current].value" placeholder="请输入1~3000的整数" clearable></Field>
                </div>
                <div class="value-title">保费(费率{{ unit }}%)</div>
                <div class="m-value">￥{{ increList[current].value }}</div>
            </div>
            <div class="i-item">
                <div class="tips">温馨提示：<br />1、请按物品实际价值来填写物品声明价值<br />2、若您已选择保价且支付宝加费用，运送过程中出现丢失或破损则本公司按照保价金额和损失的比例向您赔偿，最高不超过托寄物的实际损失金额<br />3、如果物品价值大于30000元，将按照30000元计算
                    <br />4、如需运送价值更高的物品，请联系客服
                </div>
            </div>
            <div class="bottom">
                <Button type="info" block @click='zengzhiCofirm'>确定</Button>
            </div>
        </div>
    </ActionSheet>
    <!-- 费用明细弹窗 -->
    <!--<ActionSheet v-model="mxShow" title="费用明细">
        <div class="layer-kuadi">
            <div class="e-list">
                <div class="e-item flex align-items-start space-between">
                    <div class="left flex1">
                        <div class="e-name flex align-items flex-start" >
                            <div class="cirle"></div>
                            <div class="txt">{{ item.name }}</div>
                        </div>
                        <div class="e-types flex align-items space-between">
                            <div class="m-tem">
                                <div class="txt">基础运费</div>
                                <div class="result price">{{ item.base_money }}</div>
                            </div>
                            <div class="m-tem">
                                <div class="txt">类型</div>
                                <div class="result">0</div>
                            </div>
                            <div class="m-tem">
                                <div class="txt">重量</div>
                                <div class="result">0</div>
                            </div>
                            <div class="m-tem">
                                <div class="txt">保价</div>
                                <div class="result">{{ item.insure_money }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bottom"></div>
        </div>
    </ActionSheet>-->
</div>
</template>

<script>
import {
    NavBar,
    Icon,
    Button,
    ActionSheet,
    Field,
    Dialog,
    Empty,
} from 'vant';
import {
    getUnit,
    getCanUserBaoguo,
    calcExpressPrice,
    createOrder,
} from '@/model/api';
import { getPullTypes } from '@/util';
import Address from '@/components/Address/Address'
import addBtn from '@/assets/addbtn.png';
import checkYes from '@/assets/read.png';
import checkNo from '@/assets/noread.png'
import Boxtype from '@/components/Boxtype/Boxtype';
import Boxweight from '@/components/Boxweight/Boxweight';
export default {
    components: {
        NavBar,
        Icon,
        Address,
        Button,
        ActionSheet,
        Boxtype,
        Boxweight,
        Field,
        Dialog,
        Empty,
    },
    data() {
        return {
            addBtn,
            checkYes,
            checkNo,
            show: false, //选择包裹
            infoShow: false, //包裹信息
            valueShow: false, //增值服务
            mxShow: false,
            remark: "", //备注
            list: [{
                bId:"",//已经选中的包裹列表
                id: "",
                weight: "",
                remark: "",
                value: 0,
            }],
            current: 0,
            argee: false, //是否同意电子运单条款
            unit: "", //费率
            address:{},
            baoGuoList:[],
            calcTotal:{},
        }
    },
    methods: {
        toAtricle() {
            this.$router.push({
                path: '/atricle',
                query: {
                    mode: 2,
                }
            })
        },
        openLayers(key, idx) {
            this[key] = true;
            this.current = idx;
        },
        closeLayers(key){
            this[key] = false;
            this.calcPrice();
        },
        //获取可用的包裹列表
        async getBaoGuoList(){
            let { data , code } = await getCanUserBaoguo();
            if(code == 1){
                this.baoGuoList = data.map(v => {
                    v.check = 1; //1是不选中  2是选中  3是禁用
                    return v
                })
            }
        },
        //添加一个包裹
        addListItem() {
            this.list.push({
                bId:"",//已经选中的包裹列表
                id: "",
                weight: "",
                remark: "",
                value: 0,
            })
        },
        //减少一个包裹
        reduceListItem(idx) {
            if (this.list.length == 1) {
                this.$toast({
                    type: 'fail',
                    message: "至少保留一个包裹"
                })
                return false
            }
            this.list.splice(idx, 1);
            this.current = 0;
            this.calcPrice();
        },
        //选择地址变化事件
        addressChange(address){
            this.address = address;
            this.calcPrice();
        },
        //选择包裹
        choseBaoguo(id){
            var targetIdx = this.baoGuoList.findIndex(v => v.id == id);
            this.baoGuoList.map( (v,index) => {
                targetIdx == index ? v.check = 2 : v.check = 1;
                return v
            })
        },
        submitBaoguo(){
            var targetList = this.baoGuoList.filter(v => v.check == 2);
            if(targetList.length == 0){
                this.$toast('请选择一个包裹');
                return false
            }
            this.show = false;
            var target = this.list[this.current];
            target.bId = targetList[0].id;
            this.$set(this.list,this.current,target);
            //reset默认状态
            this.baoGuoList = this.baoGuoList.map(v => {
                v.check = 1; //1是不选中  2是选中  3是禁用
                return v
            })
            this.calcPrice();
        },
        //保存增值服务数据
        zengzhiCofirm(){
            this.valueShow = false;
            this.calcPrice();
        },
        //计算价格
        calcPrice(){
            var goods = this.list.map(v => {
                var targetBaoguo = this.baoGuoList.find(item => item.id == v.bId);
                return {
                    id:targetBaoguo ? targetBaoguo.id : "",
                    category_id:targetBaoguo ? targetBaoguo.category_id : "",
                    weight:targetBaoguo ? targetBaoguo.weight : "",
                    volume_weight:targetBaoguo ? targetBaoguo.volume_weight : "",
                    insured:v.value,
                }
            })
            calcExpressPrice({
                goods:JSON.stringify(goods),
                address_id:this.address.id,
            }).then( res => {
                if(res.code == 1){
                   this.calcTotal = res.data;
                }
            })
        },
        //提交订单了
        submit(){
            if(!this.argee){
                this.$toast({
                    type:"fail",
                    message:"请阅读并同意电子运单条款"
                })
                return false
            }
            var _this = this;
            var goods = this.list.map(function(item,idx){
                return {
                    id:item.bId,
                    remarks:item.remark,
                    insured:item.value,
                }
            })
            var reqParams = {
                address_id:this.address.id,
                goods:JSON.stringify(goods),
                base_money:this.calcTotal.base_money,
                insure_money:this.calcTotal.insured_money,
                money:this.calcTotal.money,
                all_weight:this.calcTotal.all_weight,
                price:this.calcTotal.price,
            }
            createOrder(reqParams).then( res => {
                if(res.code == 1){
                    Dialog.alert({
                        message:res.msg,
                    }).then( () => {
                        this.$router.push({path:"/taborder"})
                    })
                }else{
                    this.$toast(res.msg)
                }
            })
        },
        addBaoguo(){
            this.$router.push({
                name: "tabexpress"
            })
        }
    },
    async created() {
        let {
            code,
            data
        } = await getUnit({}, false);
        if (code == 1) {
            this.unit = data;
        }
        this.getBaoGuoList();
    },
    computed: {
        increList: function () {
            var _this = this;
            return this.list.map(function (item) {
                if (!item.value || item.value < 100) {
                    return {
                        baofei: 0,
                        value: 0
                    }
                }
                if (item.value >= 30000) {
                    return {
                        baofei: 30000,
                        value: 30000 * _this.unit / 100
                    }
                }
                if (item.value >= 100 && item.value < 30000) {
                    return {
                        baofei: item.value,
                        value: item.value * _this.unit / 100,
                    }
                }
            })
        },
        //可用的包裹信息
        useBaoguoList(){
            var allCheckIdx = [];
            var userList = [];
            this.list.map(item => {
                if(item.bId != ""){
                   allCheckIdx.push(item.bId);
                }
            })
            if(allCheckIdx.length == 0)return this.baoGuoList;
            this.baoGuoList.map(v2 => {
                var findIdx = allCheckIdx.findIndex(v => v == v2.id);
                if(findIdx == "-1"){
                    userList.push(v2)
                }
            })
            return userList;
        },
        //用户已选的包裹用于展示使用
        userBaoguoList(){
            return this.list.map(v => {
                if(v.bId === ""){
                   return "请选择包裹"
                }else{
                   var targetBaoguo = this.baoGuoList.filter(item => item.id == v.bId);
                   return `${targetBaoguo[0].express_name}/${targetBaoguo[0].express_sn}`
                }
            })
        },
        boxTypeWeight(){
            var allTypes = getPullTypes();
            return this.list.map(v => {
                var target = {};
                if(v.id === ""){
                    target = allTypes[0];
                }else{
                    target = allTypes.filter(item => item.id == v.id)[0];
                }
                return `${target.name}${(v.weight ? ","+v.weight + "Kg" : "")}`
            })
        },
        //所有包裹总价计算
        allTotalPrice:function(){
            return {
                allTotalBase:this.calcTotal.base_money,
                allTotalInsure:this.calcTotal.insured_money,
                allTotalOther:this.calcTotal.base_money,
                totalPrice:this.calcTotal.money || 0,
            }
        }
    }
}
</script>

<style lang="less" scoped>
.main{
    padding-bottom: 55px;
}
.box-weight {
    width: 100%;
    background-color: #fff;
    padding: 0 14px 15px;
    .title {
        width: 100%;
        padding: 19px 0 0;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #333333;
        span {
            font-size: 12px;
            color: #999999;
        }
    }
    .ipt {
        width: 100%;
        height: 33px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #333;
        border-bottom: 1px solid #EEEEEE;
    }
    .ipt::placeholder {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #CCCCCC;
    }
}
.baoguo {
    width: 100%;
    height: auto;
    background-color: #fff;
    padding: 0 14px;
    margin-top: 5px;

    .title {
        width: 100%;
        padding: 15px;
        border-bottom: 1px solid #EEEEEE;

        .cirle {
            width: 6px;
            height: 6px;
            background: #5652FF;
            border-radius: 50%;
            margin-right: 5px;
        }

        span {
            font-size: 16px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #333333;
        }

        .iconfont {
            color: #CCCCCC;
            font-size: 12px;
        }
    }

    .info-list {
        padding: 10px 0;

        .left {
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #999999;
        }

        .right {
            overflow: hidden;

            span {
                font-size: 14px;
                font-family: PingFang SC;
                font-weight: 400;
                color: #333333;
                margin-right: 8px;
            }

            .iconfont {
                color: #CCCCCC;
                font-size: 12px;
            }
        }
    }
}

.add-btn {
    width: 100%;
    padding: 12px 9px;
    background-color: #fff;
    margin-top: 5px;

    img {
        width: 33px;
        height: 33px;
        margin: 0;
        margin-right: 6px;
    }

    span {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #5652FF;
    }
}

.agree {
    width: 100%;
    padding: 20px 13px;

    img {
        width: 12px;
        height: 12px;
    }

    .tips {
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #999999;
        margin-left: 10px;

        span {
            color: #5652FF;
        }
    }
}

.footer {
    width: 100vw;
    height: 55px;
    padding: 0 14px;
    position: fixed;
    left: 0;
    bottom: 0;
    background-color: #fff;

    .left {
        overflow: hidden;
        margin-right: 5px;

        .top {
            width: 100%;
            text-align: left;

            .sp-a {
                font-size: 14px;
                font-family: PingFang SC;
                font-weight: 400;
                color: #333333;
            }

            .sp-b {
                font-size: 14px;
                font-family: PingFang SC;
                font-weight: bold;
                color: #FF5522;
                margin: 0 5px;
            }

            .iconfont {
                font-size: 14px;
                color: #ccc;
            }
        }

        .bt {
            width: 100%;
            text-align: left;
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #999999;
        }
    }

    .right {
        width: 160px;
        height: 41px;
    }
}

.fixtop {
    z-index: 3000;
}

.layer-kuadi {
    width: 100%;
    height: auto;
    background-color: #F7F7F7;

    .bottom {
        width: 100%;
        height: 66px;
        background-color: #fff;
        padding: 15px 14px 10px;
    }

    .e-list {
        width: 100%;
        padding-top: 5px;

        .e-item {
            width: 100%;
            height: auto;
            padding: 18px 10px;
            background-color: #fff;
            margin-bottom: 5px;

            .left {
                overflow: hidden;

                .e-name {
                    width: 100%;
                    margin-bottom: 10px;

                    .sp-a {
                        font-size: 14px;
                        font-family: PingFang SC;
                        font-weight: bold;
                        color: #333333;
                        margin-right: 10px;
                    }

                    .sp-b {
                        font-size: 12px;
                        font-family: PingFang SC;
                        font-weight: 400;
                        color: #999999;
                    }

                    .cirle {
                        width: 6px;
                        height: 6px;
                        background: #5652FF;
                        border-radius: 50%;
                        margin: 0 5px;
                    }

                    .txt {
                        font-size: 16px;
                        font-family: PingFang SC;
                        font-weight: 400;
                        color: #333333;
                    }
                }

                .e-types {
                    width: 100%;
                    overflow: hidden;

                    .e-tem {
                        width: 33%;
                        margin-bottom: .2rem;
                        .txt {
                            width: 100%;
                            text-align: center;
                            font-size: 12px;
                            font-family: PingFang SC;
                            font-weight: 400;
                            color: #999999;
                        }

                        .result {
                            width: 100%;
                            text-align: center;
                            font-size: 14px;
                            font-family: PingFang SC;
                            font-weight: 400;
                            color: #333333;
                        }
                        .time{
                            width: 100%;
                            text-align: center;
                            font-size: 12px;
                            font-family: PingFang SC;
                            font-weight: 400;
                            color: #333333;
                            margin-top: 3px;
                        }
                        .price {
                            font-weight: bold;
                            color: #FF5522;
                        }
                    }
                    .m-tem {
                        width: 25%;

                        .txt {
                            width: 100%;
                            text-align: center;
                            font-size: 12px;
                            font-family: PingFang SC;
                            font-weight: 400;
                            color: #999999;
                        }

                        .result {
                            width: 100%;
                            text-align: center;
                            font-size: 14px;
                            font-family: PingFang SC;
                            font-weight: 400;
                            color: #333333;
                        }

                        .price {
                            font-weight: bold;
                            color: #FF5522;
                        }
                    }
                }
            }

            .right {
                width: 16px;
                height: 16px;
            }
        }
    }

    .i-item {
        width: 100%;
        height: auto;
        background-color: #fff;
        margin-bottom: 5px;
        overflow: hidden;

        .beizhu-title {
            width: 100%;
            padding: 20px 14px 12px;
            font-size: 16px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #333333;
        }

        .value-title {
            width: 100%;
            padding: 0 14px;
            font-size: 16px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #333333;
        }

        .ipt-value {
            margin-bottom: 20px;
            border-bottom: 1px solid #eee;
        }

        .m-value {
            width: 100%;
            padding: 8px 14px 10px;
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: bold;
            color: #FF5522;
        }

        .tips {
            width: 100%;
            height: auto;
            padding: 19px 14px;
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #999999;
            line-height: 18px;
        }
    }

    .m-item {
        width: 100%;
        height: auto;
        background-color: #fff;
        margin-bottom: 5px;
        overflow: hidden;
    }
}

.beizhu {
    width: 347px;
    height: 75px;
    background: #F7F7F7;
    border-radius: 3px;
    padding: 10px;
    margin: 0 auto 10px;

    textarea {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #333;
    }

    textarea::placeholder {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #CCCCCC;
    }
}
</style>
